<template>
  <div class="app-container">
    <el-form
      ref="listFilterRef"
      :model="list.filter"
      inline
      class="list-filter"
    >
      <el-form-item prop="__tempBelLocal">
        <FilterDestinationSelect
          v-model="list.filter.__tempBelLocal"
          placeholder="搜索 地区 | 景区"
          :filter-level="2"
          :filter-type="[0, 1, 2, 3, 4]"
          :filter-null="true"
          :label.sync="list.filter.belongPlaceName"
          :valueData.sync="list.filter.belongPlaceCode"
          :typeId.sync="list.filter.typeId"
        />
      </el-form-item>
      <el-form-item prop="name">
        <el-input v-model="list.filter.name" placeholder="搜索名称" clearable>
          <i slot="prefix" class="el-input__icon el-icon-search" />
        </el-input>
      </el-form-item>
      <el-form-item prop="status">
        <Status v-model="list.filter.status" />
      </el-form-item>
      <el-form-item>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="table-operation">
      <AuthButton @click="c" name="新增" />
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
      <el-table-column label="序号" prop="sort" />
      <el-table-column label="名称" prop="name" />
      <el-table-column label="封面">
        <template slot-scope="scope">
          <PicViewer tableCell :value="scope.row.indexImg" />
        </template>
      </el-table-column>
      <!-- <el-table-column label="市区域名称" prop="cityName" /> -->
      <el-table-column label="所属地点" prop="belongPlaceName" />
      <el-table-column label="启用状态" width="80" align="center">
        <template slot-scope="{ row: { id, status } }">
          <KiPopSwitch
            v-bind="popSwitchProps(status)"
            @change="updateStatus({ id, status: status ^ 1 })"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <auth-button @click="u({ id: row.id })" name="编辑" />
          <auth-button @click="d({ id: row.id })" name="删除" />
        </template>
      </el-table-column>
    </el-table>

    <KiFormDialog
      :show.sync="form.show"
      :title="formTitle"
      v-model="form.data"
      :submit="submitForm"
      :readonly="form.status === 'r'"
      ref="formRef"
      :loading="form.loading"
      width="60%"
    >
      <template #el-form>
        <el-form-item label="美食名称" prop="name" verify>
          <el-input
            v-model="form.data.name"
            placeholder="请输入美食名称"
            clearable
            maxlength="8"
          />
        </el-form-item>
        <el-form-item label="封面" prop="indexImg" verify>
          <Imgpond v-model="form.data.indexImg" :count="1" />
        </el-form-item>
        <el-form-item label="美食图集" prop="imgUrl" verify>
          <Imgpond
            v-model="form.data.imgUrl"
            aspectRatio="375/375"
            :count="9"
          />
        </el-form-item>
        <el-form-item label="简介" prop="briefing" verify>
          <el-input
            v-model="form.data.briefing"
            type="textarea"
            rows="3"
            maxlength="300"
            placeholder="请输入简介"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="所属地点" prop="__tempBelLocal" verify v-if="form.show">
          <FilterDestinationSelect
            v-if="form.status==='c'"
            placeholder="搜索 地区 | 区县 | 景区 | 场馆"
            v-model="form.data.__tempBelLocal"
            multiple
            :filter-level="2"
            :filter-type="[0, 1, 2, 3, 4]"
            :filter-null="true"
          />
          <FilterDestinationSelect
            v-else
            placeholder="搜索 地区 | 区县 | 景区 | 场馆"
            v-model="form.data.__tempBelLocal"
            :filter-level="2"
            :filter-type="[0, 1, 2, 3, 4]"
            :filter-null="true"
            :label.sync="form.data.belongPlaceName"
            :valueData.sync="form.data.belongPlaceCode"
            :typeId.sync="form.data.typeId"
          />
        </el-form-item>
        <el-form-item label="序号" prop="sort" verify>
          <Sort v-model="form.data.sort" />
        </el-form-item>
        <el-form-item label="介绍详情" prop="richText" verify>
          <MiniMCE v-model="form.data.richText" :disabled="form.status === 'r'"/>
        </el-form-item>
        <el-form-item label="关联高德店铺" prop="storeIds">
          <food-shop
            v-if="form.show"
            v-model="form.data.storeIds"
            :selecteList="form.data.storeNames"
          />
        </el-form-item>
      </template>
    </KiFormDialog>
  </div>
</template>

<script>
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
import FilterDestinationSelect from '@/components/FilterDestinationSelect'

import foodShop from './components/food-shop.vue'
export default {
  mixins: [pageMixin],
  components: { FilterDestinationSelect, foodShop },
  data () {
    return {
      activityList: [
        { label: '地区', type: 'city', typeId: '1', real: 'activityPlaceCode' },
        {
          label: '区县',
          type: 'country',
          typeId: '2',
          real: 'activityPlaceCode'
        },
        { label: '景点', type: 'scenic', typeId: '3', real: 'scenicId' },
        { label: '场馆', type: 'venue', typeId: '4', real: 'spaceId' }
      ]
    }
  },
  watch: {
    'list.filter.__tempBelLocal' (n) {
      if (!n) {
        this.list.filter.belongPlaceName = undefined
        this.list.filter.belongPlaceCode = undefined
        this.list.filter.typeId = undefined
      }
    }
  },
  setup: () =>
    useAdmateAdapter({
      urlPrefix: 'one-travel-api/delicious-food',
    }, {
      beforeSubmit(form) {
        if(form.status === 'c') {
          form.data.belongPlaceCodes = Array.from(form.data.__tempBelLocal, ({ value, typeId }) => ({
            typeId,
            belongPlaceCode: value,
          }))
        }
      },
    })
}
</script>
